<template>
	<div class="container">
		<!-- 面包屑导航 -->
		<div class="breadcrumb">
			<el-breadcrumb separator="">
				<el-breadcrumb-item>
					<div class="div1">订单管理</div>
				</el-breadcrumb-item>
				<el-breadcrumb-item>
					<div class="div2">外部订单</div>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑导航 -->
		<div class="nav">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="待发货" name="1"></el-tab-pane>
				<el-tab-pane label="待签收" name="2"></el-tab-pane>
				<el-tab-pane label="已签收" name="3"></el-tab-pane>
			</el-tabs>
		</div>

		<!-- 搜索	 -->
		<div class="form">
			<el-form :inline="true" ref="form" :model="queryForm" label-width="" size="mini">
				<el-form-item label="信息">
					<el-input placeholder="请输入客户手机号码/姓名" v-model="queryForm.info"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<!-- 搜索	 -->

		<div class="btns">
			<el-button type="success" size="small" @click="leadingInLive = true">导入单号</el-button>
		</div>

		<div class="table">
			<vxe-table class="xtable" ref="xtable" :data="tableData.list" :expand-config="{ expandAll: true }" :sort-config="{ trigger: 'cell' }"
			 align="center">
				<vxe-table-column type="seq" title="序号" width="55"></vxe-table-column>
				<vxe-table-column type="expand">
					<template v-slot:content="{ row }">
						<div @click="tosee(row)">
							<el-form class="demo-table-expand" v-if="!is_null(row.orderCommodityList)">
								<el-form-item>
									<p v-for="items in row.orderCommodityList" :key="items.id">
										<span>{{ items.name }}</span>
										<span>
											{{ items.price }} × {{ items.number }} =
											{{ items.total }} 元</span>
									</p>
								</el-form-item>
								<el-form-item v-if="!is_null(row.orderComplimentaryList)">
									<span style="color: red">附属品：</span>
									<p class="complimentary" v-for="items in row.orderComplimentaryList" :key="items.id">
										<span>{{ items.complimentaryName }}</span>
										<span>
											{{ items.price }} × {{ items.number }} =
											{{ items.total }} 元</span>
									</p>
								</el-form-item>
							</el-form>
							<div class="note">
								<p v-if="is_null(row.orderUser.comment)">
									<span>备注：</span>无
								</p>
								<p v-else><span>备注：</span>{{ row.orderUser.comment }}</p>
							</div>
						</div>
					</template>
				</vxe-table-column>
				<vxe-table-column title="订单编号" min-width="150">
					<template slot-scope="props">
						<el-tooltip class="item" effect="dark" content="单击复制" placement="top">
							<p style="cursor: pointer" @click="copyButton(props.row)">
								{{ props.row.orderUser.orderIdStr }}
							</p>
						</el-tooltip>
					</template>
				</vxe-table-column>
				<vxe-table-column title="客户" min-width="120">
					<template slot-scope="props">
						<p @click="tosee(props.row)" style="cursor: pointer;">
							{{ props.row.orderUser.customerUserName }}
						</p>
						<p>
							{{ props.row.orderUser.customerUserPhone }}
						</p>
					</template>
				</vxe-table-column>
				<vxe-table-column title="订单状态" min-width="120">
					<template slot-scope="props">
						<p>
							{{
		              !orderTypeSelf[props.row.orderUser.orderType]
		                ? props.row.orderUser.orderType
		                : orderTypeSelf[props.row.orderUser.orderType]
		            }}
						</p>
						<p>销售：{{ props.row.orderUser.employeeName }}</p>
						</el-popover>
					</template>
				</vxe-table-column>
				<vxe-table-column title="金额" min-width="120">
					<template slot-scope="props">
						<p>总价：￥{{ props.row.orderUser.total }}</p>
						<p>已收：￥{{ props.row.orderUser.receivedMoney }}</p>
						<p>代收：￥{{ props.row.orderUser.awaitIncomeMoney }}</p>
					</template>
				</vxe-table-column>

				<vxe-table-column title="收货地址" min-width="150">
					<template slot-scope="props">
						<p>
							<span style="color:red;">收货人:</span>{{ props.row.orderUser.addressName }}
						</p>
						<p>{{ props.row.orderUser.address }}</p>
					</template>
				</vxe-table-column>

				<vxe-table-column title="物流订单号" min-width="120" v-if="activeName == '5' || activeName == '6'">
					<template slot-scope="props">
						<el-popover v-if="
		          props.row.orderUser.logisticsOrder.logisticsCompany.indexOf(
		            '顺丰'
		          ) == -1
		        "
						 @show="
		          loginsIdClick(props.row.orderUser.logisticsOrder.parcelNumber)
		        " @hide="
		          loginsIdHide(props.row.orderUser.logisticsOrder.parcelNumber)
		        "
						 placement="left" width="350" :open-delay="200" trigger="hover">
							<!-- :src="
		            'https://m.baidu.com/s?wd=' +
		              props.row.orderUser.logisticsOrder.logisticsCompany +
		              ': ' +
		              props.row.orderUser.logisticsOrder.parcelNumber
		          " -->
							<iframe :src="
		            'https://m.kuaidi100.com/result.jsp?nu=' +
		              props.row.orderUser.logisticsOrder.parcelNumber
		          "
							 width="100%" height="500" frameborder="1" scrolling="auto" :id="props.row.orderUser.logisticsOrder" name="iframename"></iframe>
							<div slot="reference">
								<p v-if="!is_null(props.row.orderUser.logisticsOrder)">
									{{ props.row.orderUser.logisticsOrder.logisticsCompany }}
								</p>

								<p v-if="!is_null(props.row.orderUser.logisticsOrder)">
									{{ props.row.orderUser.logisticsOrder.parcelNumber }}
								</p>

								<p v-if="is_null(props.row.orderUser.logisticsOrder)">
									--
								</p>
							</div>
						</el-popover>

						<el-popover v-if="
		          props.row.orderUser.logisticsOrder.logisticsCompany.indexOf(
		            '顺丰'
		          ) != -1
		        "
						 @show="
		          loginsIdClick(props.row.orderUser.logisticsOrder.parcelNumber)
		        " @hide="
		          loginsIdHide(props.row.orderUser.logisticsOrder.parcelNumber)
		        "
						 placement="left" width="800" :open-delay="200" trigger="hover">
							<iframe v-if="
		            loginsId == props.row.orderUser.logisticsOrder.parcelNumber &&
		              props.row.orderUser.logisticsOrder &&
		              props.row.orderUser.logisticsOrder.logisticsCompany.indexOf(
		                '顺丰'
		              ) != -1
		          "
							 :src="
		            'https://www.sf-express.com/cn/sc/dynamic_function/waybill/#search/bill-number/' +
		              props.row.orderUser.logisticsOrder.parcelNumber
		          "
							 width="100%" height="500" frameborder="1" scrolling="auto" :id="props.row.orderUser.logisticsOrder" name="iframename"></iframe>
							<div slot="reference">
								<p v-if="!is_null(props.row.orderUser.logisticsOrder)">
									{{ props.row.orderUser.logisticsOrder.logisticsCompany }}
								</p>

								<p v-if="!is_null(props.row.orderUser.logisticsOrder)">
									{{ props.row.orderUser.logisticsOrder.parcelNumber }}
								</p>

								<p v-if="is_null(props.row.orderUser.logisticsOrder)">
									--
								</p>
							</div>
						</el-popover>
					</template>
				</vxe-table-column>

				<vxe-table-column title="下单时间" width="100" field="orderUser.createdTime"></vxe-table-column>

				<vxe-table-column title="更新时间" width="100" field="orderUser.updatedTime"></vxe-table-column>

				<vxe-table-column title="操作" width="100"></vxe-table-column>
			</vxe-table>

			<!-- 分页end -->
			<div class="page" v-if="tableData.totalNum >= 1">
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1"
					 :page-sizes="[10, 20, 50, 100,200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalNum"
					 prev-text="上一页" next-text="下一页">
					</el-pagination>
				</div>
			</div>

		</div>

		<!-- 直播订单导入 -->
		<el-dialog :visible.sync="leadingIn" :append-to-body="true" title="外部订单导入">
			<div class="popIn">
				<el-upload class="upload-demo" drag action="#" :multiple="false" :http-request="orderImport" :limit="1">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="
		        leadingIn = false;
		        popInAxios();
		      ">确 定</el-button>
				<el-button size="mini" @click="leadingIn = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 直播订单导入 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: "1",
				queryForm: {
					info: "",
					state: "",
					type: "",
					identifier: "",
					province: "",
					city: "",
					area: "",
					service: "",
					orgName: "",
					packageNumber: "",
				},
				tableData: [],
				currentPage1: 1,
				pageSize: 10,
				leadingIn: false,
				orderTypeSelf: {
					订单待提交审核: "订单待提交",
					组长审批: "等待组长审批",
					经理审批: "等待经理审批",
					"物流审批-待备货": "等待物流审批(待备货)",
					"物流审批-已备货": " 等待物流审批(已备货)",
					订单已审核结束: "待发货",
					待签收: "待签收",
					已签收: "已签收",
					订单已结束: "待发货",
					关闭: "关闭",
					交易关闭: "交易关闭",
				},
			}
		},
		activated() {
			this.backOrder();
		},
		methods: {
			// 待发货订单
			backOrder(pageNo) {
				this.axios
					.post("/order/order/user/endtask", {
						addressName: this.queryForm.province + this.queryForm.city + this.queryForm.area,
						customerId: this.queryForm.service,
						endTime: this.endTime,
						keyword: this.queryForm.info,
						orderId: this.queryForm.identifier,
						orderType: this.queryForm.state,
						pageNo: this.currentPage1,
						pageSize: this.pageSize,
						role: "",
						startTime: this.beginTime,
						userId: sessionStorage.getItem("user_id"),
						orgCode: "",
					})
					.then((res) => {
						//console.log("待发货订单");
						if (res.code == 0) {
							//console.log(res);
							this.tableData = res.data;
						} else {
							this.$message.error(res.message);
							this.tableData = [];
						}
						//this.getExpends();
					});
			},

			handleClick(val) {
				this.activeName = val;
			},

			orderImportLive(fileObj) {
				let formData = new FormData();
				formData.append("file", fileObj.file);
				this.logFile = formData;
			},

			// 导入数据请求
			popInAxiosLive() {
				let config = {
					headers: {
						"Content-Type": "multipart/form-data",
					},
				};
				this.axios
					.post(
						"/order/order/user/addToZhiBo",
						this.logFile,
						config
					)
					.then((res) => {
						////console.log(res);
						if (res.code == 0) {
							this.$alert(
								"导入成功的数量 " +
								res.data.importSuccessNumber +
								",  导入更新的数量" +
								res.data.importUpdateSuccessNumber +
								" 条",
								"提示", {
									confirmButtonText: "确定",
								}
							);
							if (res.data.errorUrl) {
								let url = this.ImgHttps + res.data.errorUrl; //创建下载链接
								let link = document.createElement("a"); //创建a标签
								link.style.display = "none"; //将a标签隐藏
								link.href = url; //给a标签添加下载链接
								link.setAttribute("download", "物流单号"); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
								document.body.appendChild(link);
								link.click(); //执行a标签
							}
						} else {
							this.$message.error(res.message);
						}
					})
					.catch();
			},

			// 分页
			handleCurrentChange(val) {
				this.currentPage1 = val;
				this.axiosList();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.axiosList();
			},
			is_null(content) {
				if (
					content
				) {
					return false;
				} else {
					return true;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		/deep/.el-form-item {
			margin: 0;
		}
	}

	.div1 {
		margin-left: -16px;
		background: url(../../../assets/breadcrumb2.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #2d7edf;
	}

	.div2 {
		margin-left: -16px;
		background: url(../../../assets/breadcrumb1.png);
		width: 120px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #fff;
	}

	.nav {
		background: #fff;
		padding: 5px 10px 0 10px;
		border-radius: 5px;

		/deep/.el-tabs__header {
			margin: 0;
		}

		/deep/.el-tabs__active-bar {
			padding: 0 10px;
		}

		/deep/.el-tabs__item {
			margin: 0 10px;
		}
	}

	.table {
		margin: 10px 0;
		margin-bottom:40px;
	}

	.form {
		background-color: #fff;
		padding: 10px;
		margin-top: 10px;
	}

	.btns {
		margin-top: 10px;
	}

	.page {
		// margin: 10px 0;
		text-align: right;
		width: 100%;
		background: #f5f5f5;
		padding-right: 20px;
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 1000;

		span {
			font-size: 14px;
			color: #666;
			display: inline-block;
			margin-left: 10px;
		}

		/deep/.el-input--suffix .el-input__inner {
			height: 30px;
		}

		.el-pagination {
			display: inline-block;
			vertical-align: middle;
		}
	}

	/deep/.el-dialog {
		position: relative;
		margin: 0 auto 50px;
		border-radius: 2px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		box-sizing: border-box;
	}

	/deep/.el-dialog__headerbtn {
		top: 15px;
	}

	/deep/.el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}

	/deep/.el-dialog__header {
		background: #409eff;
		padding: 10px 20px 10px;

		.el-dialog__title {
			color: #fff;
		}
	}

	/deep/.table .vxe-body--row {
		background: #ebf0f9;
		color: #000;
	}
</style>
